.lsg-paragraph,
.lsg-code-block,
.lsg-unordered-list,
.lsg-ordered-list,
.lsg-font-example {
  @extend %lsg-reset;
  color: $lsg-color;
  font-family: $lsg-font-family;
  font-size: $lsg-font-size;
  -webkit-font-smoothing: antialiased;
  font-weight: $lsg-font-weight;
  line-height: round($lsg-font-size * $lsg-line-height);
  margin: (2 * $lsg-gutter) auto;
  max-width: $lsg-width;
  text-align: $lsg-text-align;
}

.lsg-paragraph,
.lsg-unordered-list-item,
.lsg-ordered-list-item {
  > a {
    color: $lsg-link-color;
  }
}

.lsg-unordered-list-item,
.lsg-ordered-list-item {
  $margin: ceil($lsg-gutter / 2);
  @extend %lsg-reset;
  display: list-item;
  list-style: disc;
  margin: $margin 0 $margin (2 * $lsg-gutter);
}

.lsg-page-title,
.lsg-headline,
.lsg-sub-headline,
.lsg-sub-sub-headline {
  @extend %lsg-reset;
  color: $lsg-color;
  display: block;
  font-family: $lsg-headline-font-family;
  font-size: $lsg-headline-font-size;
  -webkit-font-smoothing: antialiased;
  font-weight: $lsg-headline-font-weight;
  margin: (8 * $lsg-gutter) auto (2 * $lsg-gutter);
  max-width: $lsg-width;
  text-align: $lsg-headline-text-align;
}

.lsg-anchor {
  @extend %lsg-reset;
  color: inherit;
  display: inline;
  margin-left: -1.3em;
  opacity: 0;
  padding-right: 0.3em;
  position: absolute;
  text-align: right;
  text-decoration: none;
  width: 1.3em;

  .lsg-headline:hover &,
  .lsg-sub-headline:hover &,
  .lsg-sub-sub-headline:hover & {
    opacity: 0.5;

    &:hover {
      opacity: 1;
    }
  }

  &::before {
    content: "#";
    transition: transform 0.2s;
  }

  &:active::before {
    transform: scale(0.8);
  }
}

.lsg-page-title {
  display: block;
  font-size: $lsg-page-title-font-size;
  line-height: round($lsg-page-title-font-size * $lsg-line-height);
}

.lsg-sub-headline {
  display: block;
  font-size: $lsg-sub-headline-font-size;
  line-height: round($lsg-sub-headline-font-size * $lsg-line-height);
  margin-top: 4 * $lsg-gutter;
}

.lsg-sub-sub-headline {
  display: block;
  font-size: $lsg-sub-sub-headline-font-size;
  line-height: round($lsg-sub-sub-headline-font-size * $lsg-line-height);
  margin-top: 4 * $lsg-gutter;
}

.lsg-example {
  @extend %lsg-reset;
  background: $lsg-example-background;
  border-top-left-radius: $lsg-border-radius;
  border-top-right-radius: $lsg-border-radius;
  display: block;
  margin: (2 * $lsg-gutter) auto;
  max-width: $lsg-width;
  overflow: hidden;
  position: relative;

  &.lsg-has-full-width {
    @extend #{$lsg-layout-selector} !optional;
    border-radius: 0;
    display: block;
    height: auto;
    margin: 0 auto;
    max-width: 100%;
    min-height: auto;
    padding: $lsg-full-width-padding;
    width: 100%;

    .lsg-code-block {
      z-index: 2;

      &::before {
        background-color: inherit;
        bottom: 0;
        content: "";
        left: 50%;
        position: absolute;
        top: 0;
        transform: translateX(-50%);
        width: 100vw;
        z-index: -1;
      }
    }
  }

  &.lsg-for-javascript {
    display: none;
  }
}

hr {
  border: 0;
  border-top: 1px mix($lsg-color, $lsg-background-color, 10%) solid;
  margin: (8 * $lsg-gutter) (2 * $lsg-gutter);
}

.lsg-html {
  display: block;
  padding: $lsg-example-padding;
}

.lsg-font-example {
  @extend %lsg-reset;
  display: block;
}

.lsg-font-example-text {
  @extend %lsg-reset;
  display: block;
  margin-bottom: 2 * $lsg-gutter;

  &::first-line {
    font-size: $lsg-font-example-first-line;
  }
}
